<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="登录">
        <meta name="description" content="用来登录学校官网">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .university {
                width:390px;
                height:1000px;
                padding:24px;
                margin:100px auto;
              
                border-radius:30px;
               
                background-repeat: no-repeat;
                background-size: 500px;
            }
             body {
             background-image:url(https://gd-hbimg.huaban.com/45e4b61a5bf5e81c46af4c4fc85848cf627d09dd974c1-2FYBPr);
                 background-repeat: no-repeat;
          
                 background-size: cover;}
            .input {
                width:400px;
                border:5px solid wheat;
                padding: 10px;
                margin:0px auto;
            }
            .com {
                
                background:url(https://gd-hbimg.huaban.com/13c15ea8544adcf97bb71ba3a65f56e0091ecab269997-loIE57);
                
            }
            
            .campus {
                width:400px;
                height:160px;
                border:2px solid pink;
                border-radius:20px;
                margin-top:60px;
                padding:10px;
                background-image: url(https://gd-hbimg.huaban.com/f63f2ee38fbc39baf1e1bb080c7ca0441655947d981ea-KhwJwD_fw1200) ;
                background-size:400px auto;
                box-shadow:0 0 5PX;
                flex-direction:row;
            }  
            .login-box {
                width:360px;
                height:100px;
                border:8PX dotted rgb(224, 144, 224);
                border-radius: 20px;
                margin-top: 80px;
                padding:6px;
                background-image: url(https://gd-hbimg.huaban.com/40a090241b819f891972fdffbef64f3f3c8bd10014d837-mjLBKP);
                display: flex;
                flex-direction: row;
              
            
            }
            /*头像*/
            .portion {
                width: 90px;
                height:90px;
                background-image: url(https://gd-hbimg.huaban.com/6c450234b9e4dac5e6cccaba220597bcd19fe92b331e2-bBsdEf);
                background-size: 80px auto;
                border-radius: 6px;
                margin-top: 2px;
            }
            .app {
                margin-top: 8px;
                padding:3px;
                width:80px;
                display: right;
                margin-left: 20px;
            }
            .qvtu {
                font-size: 40px;
                font-weight: bold;
                color:aliceblue;
            }
            .login {
                position: relative;
                width:40PX;
            }
            .head {
                margin-top: 60px;
                color:rgb(18, 47, 73);
                font-size:30px;
            }
            .web {
                width:400px;
                height:200px;
                background-color: rgb(229, 236, 186);
                margin-top: 20px;
                padding:16PX;
                border-radius: 10px;
            }
            .word {
                width:40px;
                height:auto;
                margin-top:20px;
                padding:20PX;
                margin-left: 10px;
            }
            .play {
                margin-left: 20px;
                margin-top: 0%;
                padding: 1px;
                color:antiquewhite;
                margin-bottom: 2px;
            }
            .alt {
                width:400px;
                height:200px;
                background-color: aliceblue;
                display: flex;
                flex-direction: column;
                border-radius: 20px;
                margin-top: 80px;
                padding: 6px;

            }
            .recent {
                font-size: 30px;
                font-weight: 800;

            }
            .many {
                font-size: 20px;
                margin-left: 180px;
                margin-top: 1px;
                border-bottom: 5px solid dodgerblue;
                display: flex;
                flex-direction: row;
            }
            .class {
                display: flex;
                flex-direction: row;
            }
            .box2 {
                display: flex;
                flex-direction: row;
            }
            .last {
                margin-top: 10px;
                font-size: 20px;
            }
            .person {
                margin-top: 40px;
            }
            
           
        </style>
    </head>
    <body>
        <div class="university">
          <div>
            <h3 class="qvtu">泉州职业技术大学</h3>
          </div>  
          <div>
            <input type="text" placeholder="你收到一条信息" class="input">
            <div class="com"></div>
          </div>
          <div class="campus">
          </div>


          <div class="login-box">

            <div class="portion">  
            </div>
          
          <div class="play">
          <h3>星寻</h3>
          <div>
          <h4>泉州职业技术大学</h4>
        </div>
        </div>
        <div class="app">
          <h4><button class="app">个人主页</button></h4>
        </div>
        </div>

        <div class="alt">
        <div class="box2">
         <div class="recent">近日课程</div>
         <div class="many">查看更多</div>
         </div>
   <div class="last">
    c语言程序设计(星期一)
    <br><br>
    web前端开发技术(星期二)
    <br><br>
    中国近代史纲要(星期五)
   </div>
         <div class="box1">
         </div>

        </div>
         
        
          <div class="person">
       
            <a href="登录.html">
            <img src="https://gd-hbimg.huaban.com/7527bb9a696a5d8ffcb3374ace0d7611f8e3f7e71517-XTPI7y" class="word">
            </a>
            <a href="个人中心.html">
            <img src="https://gd-hbimg.huaban.com/9c2ee9c4f80f0e42eba59a6567359d733b681095bcff-6sTcuT_fw1200" class="word">
            </a>
            <a href="首页.html">
            <img src="https://gd-hbimg.huaban.com/2ee23a061361239aed40c704697d5d1343422c0aea7-LXOcsM" class="word">
            </a>
            <a href="校园.html">
            <img src="https://gd-hbimg.huaban.com/5837af2bc198c7ef6d478c7a37fb115fcaed930012da-0Yjk1L" class="word">
            </a>
          </div>
        
    </body>
</html>